<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单校验</title>
</head>

<body>

    用户名 <input type="text" name="username" id="username" />
    密码 <input type="text" name="password" id="password" />
    <button id="register">注册</button>

    <script>
        // 在函数的原型上添加before
        Function.prototype.before = function (beforeFn) {
            let thisFn = this;
            return function () {
                // 先执行装饰器的校验函数，
                let pass = beforeFn();
                // 如果通过在继续执行原函数，因为上原函数调用的before，所以this指向原函数
                if (pass) {
                    thisFn.apply(this, arguments);
                }
            }
        }
        // 点击注册实现提交
        function registerFn(event) {
            console.log('提交表单');
        }

        // 在原有的注册函数上添加校验用户名 和 密码 的功能，采用装饰器
        // 重写registerFn，并且通过Fn原型的方式获取this，this就是原本的注册函数
        
        // 装饰器校验用户名
        registerFn = registerFn.before(function () {
             let username = document.getElementById('username').value;
             if (!username) {
                 return alert('用户名不能为空')
             }
             return true;
         });

        // 装饰器校验密码
        registerFn = registerFn.before(function () {
            let password = document.getElementById('password').value;
            if (!password) {
                return alert('密码不能为空')
            }
            return true;
        });

        
        let registerBtn = document.getElementById('register');
        registerBtn.addEventListener('click', registerFn);
    </script>
</body>

</html>